<template>
  <Modal
    :active="collectionCardModalVueActive"
    transfer
    title="集合卡片"
    hide-mask
    draggable
    :width="650"
    :no-footer="true"
    @close="closeBtn"
  >
    <!-- <div>
      <div class="tableList">
        <table class="property-table">
          <tr>
            <td class="label">
              <div style="width: 150px">对象</div>
            </td>
            <td class="value">值</td>
          </tr>
          <tr>
            <td class="label indent">
              <Dropdown placement="right" style="width: 100%">
                <Button text size="small" style="width: 100%">
                  <div style="width: 100%; text-align: left">名字</div>
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      name="选项一"
                      v-for="(item, index) in nameList"
                      :key="index"
                      @select="selectBtn(item, 'name')"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </td>
            <td class="value">
              <div v-if="!nameShow">
                {{ formData.name }}
              </div>
              <div class="selector-buttons" v-if="nameShow">
                <button class="selector-button active">
                  {{ formData.name }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="label indent">
              <Dropdown placement="right" style="width: 100%">
                <Button text size="small" style="width: 100%">
                  <div style="width: 100%; text-align: left">标识</div>
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      v-for="(item, index) in signList"
                      :key="index"
                      @select="selectBtn(item, 'sign')"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </td>
            <td class="value">
              <div v-if="!signShow">
                {{ formData.sign }}
              </div>
              <div class="selector-buttons" v-if="signShow">
                <button class="selector-button active">
                  {{ formData.sign }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="label indent">
              <Dropdown placement="right" style="width: 100%">
                <Button text size="small" style="width: 100%">
                  <div style="width: 100%; text-align: left">包含文件</div>
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      v-for="(item, index) in includeFilesList"
                      :key="index"
                      @select="selectBtn(item, 'includeFiles')"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </td>
            <td class="value">
              <div v-if="!includeFilesShow">
                {{ formData.includeFiles }}
              </div>
              <div class="selector-buttons" v-if="includeFilesShow">
                <button class="selector-button active">
                  {{ formData.includeFiles }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="label indent">
              <Dropdown placement="right" style="width: 100%">
                <Button text size="small" style="width: 100%">
                  <div style="width: 100%; text-align: left">类型</div>
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      v-for="(item, index) in typesList"
                      :key="index"
                      @select="selectBtn(item, 'types')"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </td>
            <td class="value">
              <div v-if="!typesShow">
                {{ formData.types }}
              </div>
              <div class="selector-buttons" v-if="typesShow">
                <button class="selector-button active">
                  {{ formData.types }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="label indent">
              <Dropdown placement="right" style="width: 100%">
                <Button text size="small" style="width: 100%">
                  <div style="width: 100%; text-align: left">节点</div>
                </Button>
                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      v-for="(item, index) in nodeList"
                      :key="index"
                      @select="selectBtn(item, 'node')"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </td>
            <td class="value">
              <div v-if="!nodeShow">
                {{ formData.node }}
              </div>
              <div class="selector-buttons" v-if="nodeShow">
                <button class="selector-button active">
                  {{ formData.node }}
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td class="label">
              <span class="toggle" @click.stop="toggleImplementation">
                <img
                  v-if="implementationExpanded"
                  src="../assets/downArrow.svg"
                  alt=""
                  class="icon imgStyle_img"
                />
                <img
                  v-else
                  src="../assets/rightArrow.svg"
                  alt=""
                  class="icon imgStyle_img"
                />
                不支持的卡片
              </span>
            </td>
            <td class="value">
              <Checkbox v-model:checked="formData.implementation"> </Checkbox>
            </td>
          </tr>
          <template v-if="implementationExpanded">
            <tr>
              <td class="label indent2">
                <Dropdown placement="right" style="width: 100%">
                  <Button text size="small" style="width: 100%">
                    <div style="width: 100%; text-align: left">
                      行输入关键词
                    </div>
                  </Button>
                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in rowList"
                        :key="index"
                        @select="selectBtn(item, 'row')"
                      >
                        {{ item.label }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </td>
              <td class="value">
                <div v-if="!rowShow">
                  {{ formData.row }}
                </div>
                <div class="selector-buttons" v-if="rowShow">
                  <button class="selector-button active">
                    {{ formData.row }}
                  </button>
                  <button class="selector-button icon-button">
                    <img
                      src="../assets/delete.svg"
                      alt=""
                      class="icon imgStyle"
                    />
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="label indent2">
                <Dropdown placement="right" style="width: 100%">
                  <Button text size="small" style="width: 100%">
                    <div style="width: 100%; text-align: left">
                      表输入关键词
                    </div>
                  </Button>
                  <template #drop>
                    <DropdownList>
                      <DropdownItem
                        v-for="(item, index) in outsideList"
                        :key="index"
                        @select="selectBtn(item, 'outside')"
                      >
                        {{ item.label }}
                      </DropdownItem>
                    </DropdownList>
                  </template>
                </Dropdown>
              </td>
              <td class="value">
                <div v-if="!outsideShow">
                  {{ formData.outside }}
                </div>
                <div class="selector-buttons" v-if="outsideShow">
                  <button class="selector-button active">
                    {{ formData.outside }}
                  </button>
                  <button class="selector-button icon-button">
                    <img
                      src="../assets/delete.svg"
                      alt=""
                      class="icon imgStyle"
                    />
                  </button>
                </div>
              </td>
            </tr>
          </template>
        </table>
      </div>
      <div class="foot-box">
        <Button type="primary" size="small" @click="confirm">确定</Button>
        <Button type="default" size="small" @click="alignmentBtn">取消</Button>
      </div>
    </div> -->
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Button,
  Input,
  RadioGroup,
  Radio,
  Checkbox,
  Dropdown,
  DropdownList,
  DropdownItem,
} from "cax-ui";
import { useCoreStore, _global } from "@/UI/store";
import { storeToRefs } from "pinia";
const coreStore = useCoreStore();
const { collectionCardModalVueActive } = storeToRefs(coreStore);

const formData = ref({
  name: "Set_1",
  sign: "1",
  includeFiles: "Main Model",
  types: "nodes",
  node: "0 node(s)",
  implementation: true,
  row: "1",
  outside: "1 row(s)",
});
const nameShow = ref(false);
const nameList = ref([
  {
    label: "Set_1",
    value: "1",
  },
  {
    label: "Set_2",
    value: "2",
  },
]);
const signShow = ref(false);
const signList = ref([
  {
    label: "1",
    value: "1",
  },
  {
    label: "2",
    value: "2",
  },
]);
const includeFilesShow = ref(false);
const includeFilesList = ref([
  {
    label: "Main Model",
    value: "1",
  },
]);
const typesShow = ref(false);
const typesList = ref([
  {
    label: "Nodes",
    value: "1",
  },
  {
    label: "Elements",
    value: "2",
  },
  {
    label: "Components",
    value: "3",
  },
  {
    label: "Sets",
    value: "4",
  },
]);
const nodeShow = ref(false);
const nodeList = ref([
  {
    label: "0 node(s)",
    value: "1",
  },
  {
    label: "chose",
    value: "2",
  },
]);
const rowShow = ref(false);
const rowList = ref([
  {
    label: "1",
    value: "1",
  },
  {
    label: "2",
    value: "2",
  },
]);
const outsideShow = ref(false);
const outsideList = ref([
  {
    label: "1 row(s)",
    value: "1",
  },
]);

function selectBtn(item, type) {
  if (type == "name") {
    formData.value.name = item.label;
    nameShow.value = true;
  } else if (type == "sign") {
    formData.value.sign = item.label;
    signShow.value = true;
  } else if (type == "includeFiles") {
    formData.value.includeFiles = item.label;
    includeFilesShow.value = true;
  } else if (type == "types") {
    formData.value.types = item.label;
    typesShow.value = true;
  } else if (type == "node") {
    formData.value.node = item.label;
    nodeShow.value = true;
  } else if (type == "row") {
    formData.value.row = item.label;
    rowShow.value = true;
  } else if (type == "outside") {
    formData.value.outside = item.label;
    outsideShow.value = true;
  }
}
const implementationExpanded = ref(true);
function toggleImplementation() {
  implementationExpanded.value = !implementationExpanded.value;
}

function confirm() {
  closingMethod();
}

function closeBtn() {
  closingMethod();
}

function alignmentBtn() {
  closingMethod();
}
function closingMethod() {
  nameShow.value = false;
  signShow.value = false;
  includeFilesShow.value = false;
  typesShow.value = false;
  nodeShow.value = false;
  rowShow.value = false;
  outsideShow.value = false;
  collectionCardModalVueActive.value = false;
}
</script>
<style scoped>
.foot-box {
  width: 100%;
  height: 40px;
  text-align: right !important;
}

.tableList {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.property-table {
  width: 100%;
  border-collapse: collapse;
}

.property-table tr {
  border-bottom: 1px solid #f0f0f0;
}

.property-table td {
  padding: 8px 12px;
}

.selected-row {
  background-color: #e6f7ff;
}

.label {
  width: 200px;
  color: #333;
  font-weight: normal;
  text-align: left;
  border-right: 1px solid #f0f0f0;
}

.indent {
  padding-left: 20px !important;
}
.indent2 {
  padding-left: 40px !important;
}
.value {
  text-align: left;
}

.value input[type="text"],
.value input[type="number"],
.value select {
  width: 100%;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 380px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
.imgStyle {
  width: 100%;
  height: 100%;
}
.imgStyle_img {
  width: 20px;
  height: 12px;
}
</style>
